<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

<title></title>

<link rel="stylesheet" href="css/pintuer.css">
<link rel="stylesheet" href="css/admin.css">
<script src="js/jq.js"></script>
<script src="js/admin.js"></script>
<script type="text/javascript">
//页面加载成功给HTML元素添加事件
$(function(){
	//发起Ajax请求
	$.get("AreaServlet",{areaCode:"450421",grade:"1",method:"ldArea"},function(data){
		//使用eval方法将数据转换为JS对象
		eval("var x ="+data)
		//将响应县的数据填充到县下拉框中
		//获取下拉框对象
		var sel = $("#xjbh");
		//清空原有内容
		sel.empty();
		//遍历
		for(var i =0;i<x.length;i++){
			//填充
			sel.append("<option value ='"+x[i].areaCode+"' >"+x[i].areaName+"</option>")
		}
		//触发县的change事件
		$("#xjbh").trigger("change");
	});
	//县的触发事件
	$("#xjbh").change(function(){
		//获取县的编号
		var xCode = $("#xjbh").val();
		//发起Ajax请求
		$.get("AreaServlet",{areaCode:xCode,grade:"2",method:"ldArea"},function(data){
			
			//使用eval方法将数据转换为JS对象
			eval("var xz ="+data)
			//将响应乡镇的数据填充到乡镇下拉框中
			//获取乡镇下拉框对象
			var sel = $("#xzbh");
			//清空原有内容
			sel.empty();
			sel.append("<option value ='0' >无</option>")
			//遍历
			for(var i =0;i<xz.length;i++){
				//填充
				sel.append("<option value ='"+xz[i].areaCode+"' >"+xz[i].areaName+"</option>")
			}
			//触发xzbh的change事件
			$("#xzbh").trigger("change");
		})
	});
	//乡镇的触发事件
	$("#xzbh").change(function(){
		//获取乡镇的编号
		var xCode = $("#xzbh").val();
		//发起Ajax请求
		$.get("AreaServlet",{areaCode:xCode,grade:"3",method:"ldArea"},function(data){
			//使用eval方法将数据转换为JS对象
			eval("var c ="+data)
			//将响应村的数据填充到村下拉框中
			//获取村下拉框对象
			var sel = $("#cbh");
			//清空原有内容
			sel.empty();
			sel.append("<option value ='0' >无</option>")
			//遍历
			for(var i =0;i<c.length;i++){
				//填充
				sel.append("<option value ='"+c[i].areaCode+"' >"+c[i].areaName+"</option>")
			}
			//触发村的change事件
			$("#cbh").trigger("change");
		})
	});
	//村的触发事件
	$("#cbh").change(function(){
		//获取乡镇的编号
		var xCode = $("#xzbh").val();
		//获取乡镇选择框对象
		//发起Ajax请求
		$.get("AreaServlet",{areaCode:xCode,grade:"4",method:"ldArea"},function(data){
			//使用eval方法将数据转换为JS对象
			eval("var zu ="+data)
			//将响应组的数据填充到组下拉框中
			//获取组下拉框对象
			var sel = $("#zbh");
			//清空原有内容
			sel.empty();
			sel.append("<option value ='0' >无</option>")
			//遍历
			for(var i =0;i<zu.length;i++){
				//填充
				sel.append("<option value ='"+zu[i].areaCode+"' >"+zu[i].areaName+"</option>")
			}
		})
	});
})

</script>
</head>
<body>
<div class="panel admin-panel ">
  <div class="panel-head" ><strong class="icon-reorder">增加家庭档案信息</strong></div>
  <div class="body-content">
    <form method="post" class="form-x" action="FamilyServlet?method=addFamily"> 
    
    <div class="form-group">
        <div class="label">
          <label>县级编号：</label>
        </div>
        <div class="field">
         <select name="xjbh" id="xjbh" class="input w50">
         </select>
        </div>
      </div>
    
    <div class="form-group">
        <div class="label">
          <label>乡镇编号：</label>
        </div>
        <div class="field">
          <select name="xzbh" id="xzbh" class="input w50">
          </select>
        </div>
      </div>
    
      <div class="form-group">
        <div class="label">
          <label>村编号：</label>
        </div>
        <div class="field">
         <select name="cbh" id="cbh" class="input w50">
         </select>
        </div>
      </div>
      
      <div class="form-group">
        <div class="label">
          <label>组编号：</label>
        </div>
        <div class="field">
          <select name="zbh" id="zbh" class="input w50">
          </select>
        </div>
      </div>
      
      <div class="form-group">
        <div class="label">
          <label>家庭编号</label>
        </div>
        <div class="field">
          <input type="text" class="input w50" name="jtbh"  id="jtbh"
          data-validate="required:必填项"  />
          <span id="jtbhSpan"></span>
          <div class="tips"></div>
        </div>
      </div>
      
      <div class="form-group">
        <div class="label">
          <label>户属性：</label>
        </div>
        <div class="field">
          <input type="text" class="input w50" name="hsx"  data-validate="required:必填项"  />
          <div class="tips"></div>
        </div>
      </div>
      
      <div class="form-group">
        <div class="label">
          <label>户主姓名：</label>
        </div>
        <div class="field">
          <input type="text" class="input w50" name="hzxm"  data-validate="required:必填项"  />
          <div class="tips"></div>
        </div>
      </div>
      
      <div class="form-group">
        <div class="label">
          <label>家庭人口数：</label>
        </div>
        <div class="field">
          <input type="text" class="input w50" name="jtrks"  data-validate="required:必填项"  />
          <div class="tips"></div>
        </div>
      </div>
      
      <div class="form-group">
        <div class="label">
          <label>农业人口数：</label>
        </div>
        <div class="field">
          <input type="text" class="input w50" name="nyrks"  data-validate="required:必填项"  />
          <div class="tips"></div>
        </div>
      </div>
      
      <div class="form-group">
        <div class="label">
          <label>家庭住址：</label>
        </div>
        <div class="field">
          <input type="text" class="input w50" name="jtdz"  data-validate="required:必填项"  />
          <div class="tips"></div>
        </div>
      </div>
      
      <div class="form-group">
        <div class="label">
          <label>创建档案时间：</label>
        </div>
        <div class="field">
          <input type="date" class="input w50" name="cjdasj"  data-validate="required:必填项"  />
          <div class="tips"></div>
        </div>
      </div>
      
      <div class="form-group">
        <div class="label">
          <label>登记员：</label>
        </div>
        <div class="field">
          <input type="text" class="input w50" name="djy"  data-validate="required:必填项"  />
          <div class="tips"></div>
        </div>
      </div>

      
      <div class="form-group">
        <div class="label">
          <label></label>
        </div>
        <div class="field">
        <input
					type="reset" class="button bg-main icon-check-square-o" value="重置信息" />
          <button class="button bg-main icon-check-square-o" type="submit" id="submit"> 提交</button>
        </div>
      </div>
    </form>
  </div>
</div>
</body>
	
</html>